声明：本文于2023年5月17日首发在“WordPress建站帮”，原贴地址：https://www.wpjzb.com/wp-tutorials/wordpress-website-inserts-bilibili-video-adaptive-tutorial/转载注明出处！

很多小伙伴都在问我如何在网站里嵌入自适应的 html5 视频，国外的网站大多可以依赖 Youtube 做为视频床，但是国内由于大环境的原因，很多视频平台都包含了大量的广告内容。不过好在还有 Bilibili 这个另类，所以今天就来教大家如何将 Bilibili 的视频插入到 WordPress 网站中并达到自适应的效果。

话不多说，我们直接上教程办法：

首先，找到我们需要在网站中插入的 Bilibili 视频链接，比如：

https://www.bilibili.com/video/BV1zg4y157Gy/

我们可以看到，这个视频链接中，有一个以 BV 开头的字段：BV1zg4y157Gy，这个就是该视频的bvid，接下来，我们在网站中需要插入该视频的地方，使用古腾堡编辑器插入一个自定义 HTML 的 Block 块，并在里面输入以下代码：

我们可以看到，代码中的bvid对应的就是：BV1zg4y157Gy。同时我们还在代码中加入了宽度的样式，使播放器宽度能够达到 100% 页面宽度。但是还有自适应的问题，我们还要设定等比缩放的视频高度！因为在 CSS 中无法实现等比高度，所以，我们可以借助 JavaScript 代码内容（此方法由强大的 ChatGPT 人工智能给出），我们给这个 iframe 标签加一个 class 类，然后再写一段对应的 JavaScript 代码，比如我们设定的这个 class 类名称为 jzbvideo，则代码变为：

同时，我们还要在我们的主题 footer 中，加入以下 JavaScript 代码：

将这段代码中的注释部分去除：

开头的“”改为“>”；

这段 JavaScript 代码的意思是浏览器渲染页面时会检查名为 jzbvideo 的 CSS 类，不管有几个都会检查出来，然后就给它设定视频显示高度是宽度的0.5625倍，这个比例是 16:9 视频的标准比例尺寸！代码插入后，我们就可以查看调用效果了。